<template>
  <div class="dashboard-container">
    <!-- 单位数 -->
    <div class="data-card">
      <div class="icon-wrapper">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 12V19" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 8H16" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 12H16" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 16H16" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="text-content">
        <div class="label">单位数</div>
        <div class="value">30个</div>
      </div>
    </div>

    <!-- 窗口数 -->
    <div class="data-card">
      <div class="icon-wrapper">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 2V8" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 16V22" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 12H16" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="text-content">
        <div class="label">窗口数</div>
        <div class="value">200个</div>
      </div>
    </div>

    <!-- 全年累计取号量 -->
    <div class="data-card number-display">
      <div class="label">全年累计取号量</div>
      <div class="number-sequence">
        <div class="digit">1</div>
        <div class="digit">2</div>
        <div class="digit">3</div>
        <div class="digit">4</div>
        <div class="digit">5</div>
        <div class="digit">9</div>
      </div>
    </div>

    <!-- 全年累计办件量 -->
    <div class="data-card number-display">
      <div class="label">全年累计办件量</div>
      <div class="number-sequence">
        <div class="digit">0</div>
        <div class="digit">0</div>
        <div class="digit">1</div>
        <div class="digit">2</div>
        <div class="digit">3</div>
        <div class="digit">9</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardStats'
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #152033;
  color: white;
  min-height: auto;
  height: auto;
}

.data-card {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #00bfff;
  border-radius: 4px;
  padding: 8px;
  margin: 0 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.data-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.icon-wrapper {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-content {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 10px;
  color: #ffffff;
  margin-bottom: 1px;
}

.value {
  font-size: 14px;
  font-weight: bold;
  color: #ffd700;
}

.number-display {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.number-display .label {
  font-size: 10px;
  color: #ffffff;
  margin-bottom: 4px;
}

.number-sequence {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.digit {
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #00bfff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
    padding: 8px;
    height: auto;
  }
  
  .data-card {
    margin: 6px 0;
    width: 100%;
  }
  
  .number-sequence {
    gap: 3px;
  }
  
  .digit {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}
</style>